<template>
  <div class="app-container">
    <!-- 顶部导航按钮 -->
    <div class="filter-container">
      <router-link to="/main/xingzheng/gudingzichan">
        <el-button type="primary">返回</el-button>
      </router-link>
      <span>
        <el-button style="margin-left: 10px" type="primary" @click="goToList"
          >列表</el-button
        >
        <el-button type="info" icon="el-icon-printer" @click="printForm"
          >打印</el-button
        >
      </span>
    </div>
    <!-- 标题 -->
    <div>
      <h2>固定资产标签</h2>
    </div>
    <!-- 表单 -->
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="120px"
      class="form-container"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="NO:" prop="labelNo">
            <el-input v-model="formData.labelNo" :disabled="isView" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产类型">
            <el-checkbox v-model="formData.isElectrical" :disabled="isView"
              >电器</el-checkbox
            >
            <el-checkbox v-model="formData.isTool" :disabled="isView"
              >工具</el-checkbox
            >
            <el-checkbox v-model="formData.isOther" :disabled="isView"
              >其他</el-checkbox
            >
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="申请单位" prop="applicationUnit">
            <el-input v-model="formData.applicationUnit" :disabled="isView" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="购买日期" prop="purchaseDate">
            <el-date-picker
              v-model="formData.purchaseDate"
              type="date"
              placeholder="选择日期"
              :disabled="isView"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="资产名称" prop="assetName">
            <el-input v-model="formData.assetName" :disabled="isView" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产编号" prop="assetNumber">
            <el-input v-model="formData.assetNumber" :disabled="isView" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="型号" prop="model">
            <el-input v-model="formData.model" :disabled="isView" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格" prop="specification">
            <el-input v-model="formData.specification" :disabled="isView" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="存放地点" prop="storageLocation">
            <el-input v-model="formData.storageLocation" :disabled="isView" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保管人" prop="custodian">
            <el-input v-model="formData.custodian" :disabled="isView" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="保管人签名" prop="custodianSignature">
        <el-input v-model="formData.custodianSignature" :disabled="isView" />
      </el-form-item>

      <el-form-item label="财务管理部意见" prop="financeOpinion">
        <el-input
          v-model="formData.financeOpinion"
          type="textarea"
          :rows="3"
          :disabled="isView"
        />
      </el-form-item>

      <el-form-item label="部门主管意见" prop="departmentSupervisorOpinion">
        <el-input
          v-model="formData.departmentSupervisorOpinion"
          type="textarea"
          :rows="3"
          :disabled="isView"
        />
      </el-form-item>

      <el-form-item label="总裁/董事长意见" prop="presidentOpinion">
        <el-input
          v-model="formData.presidentOpinion"
          type="textarea"
          :rows="3"
          :disabled="isView"
        />
      </el-form-item>

      <el-form-item class="form-item" label-width="0px" v-if="!isView">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  saveFixedAssetLabel,
  getFixedAssetLabelDetail,
} from "@/api/fixedAssetLabel";

export default {
  name: "FixedAssetLabel",
  data() {
    return {
      formData: {
        id: null,
        labelNo: "",
        isElectrical: false,
        isTool: false,
        isOther: false,
        applicationUnit: "",
        purchaseDate: "",
        assetName: "",
        assetNumber: "",
        model: "",
        specification: "",
        storageLocation: "",
        custodian: "",
        custodianSignature: "",
        financeOpinion: "",
        departmentSupervisorOpinion: "",
        presidentOpinion: "",
      },
      rules: {
        labelNo: [
          { required: true, message: "请输入标签编号", trigger: "blur" },
        ],
        applicationUnit: [
          { required: true, message: "请输入申请单位", trigger: "blur" },
        ],
        assetName: [
          { required: true, message: "请输入资产名称", trigger: "blur" },
        ],
        assetNumber: [
          { required: true, message: "请输入资产编号", trigger: "blur" },
        ],
        custodian: [
          { required: true, message: "请输入保管人", trigger: "blur" },
        ],
      },
      isView: false,
    };
  },
  created() {
    const { id, type } = this.$route.query;
    if (id) {
      this.formData.id = id;
      this.getDetail();
    }
    this.isView = type === "view";
  },
  methods: {
    async getDetail() {
      try {
        const response = await getFixedAssetLabelDetail(this.formData.id);
        this.formData = {
          ...response.data,
          purchaseDate: response.data.purchaseDate
            ? new Date(response.data.purchaseDate)
            : null,
        };
      } catch (error) {
        console.error("获取详情失败:", error);
        this.$message.error("获取详情失败");
      }
    },
    goToList() {
      this.$router.push("/main/xingzheng/gdzichanbq/gdzichanbqList");
    },
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            await saveFixedAssetLabel(this.formData);
            this.$message.success("保存成功");
            this.goToList();
          } catch (error) {
            console.error("保存失败:", error);
            this.$message.error("保存失败");
          }
        }
      });
    },
    printForm() {
      window.print();
    },
  },
};
</script>

<style scoped>
/* 设置全局字体为宋体 */
body {
  font-family: "宋体", sans-serif;
}

/* 容器样式 */
.app-container {
  margin: 0 auto;
  padding: 20px;
  /* background-color: #f9f9f9; */
  border-radius: 8px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  width: 210mm;
}

/* 过滤容器样式 */
.filter-container {
  display: flex;
  position: relative;
  justify-content: space-between;
}
.el-col-8 {
  width: 50%;
}
/* 标题样式 */
h2 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* 表单容器样式 */
.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* 行样式 */
.el-row {
  margin-bottom: 20px;
}

/* 禁用输入框样式 */
.el-input[disabled],
.el-date-picker[disabled] {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

/* 保存按钮样式 */
.el-button {
  transition: background-color 0.3s ease;
}

.el-button:hover {
  background-color: #409eff;
  color: #fff;
}
@media print {
  .filter-container,
  .form-item {
    display: none !important;
  }
  .form-container {
    box-shadow: none;
  }
  ::v-deep textarea.el-textarea__inner {
    resize: none !important;
  }
}
</style>